<template>
  <div class="content_box">
    <div class="lanmu_box">
      <div class="box">
        <van-tabs v-model="active" @change="tabChange">
          <van-tab :title="item.name" v-for="(item,index) in lanmu" :key="index"></van-tab>
        </van-tabs>
      </div>
    </div>
    <div class="list_box">
      <div class="box">
        <div class="top">
          <p class="code">CFEG52645162</p>
          <p class="status"><span></span>在线</p>
        </div>
        <div class="nr">
          <div class="list">
            <p class="title">所属厂家：</p>
            <p class="text">统统锁有限公司</p>
          </div>
          <div class="list">
            <p class="title">厂家地址：</p>
            <p class="text">重庆市九龙坡石桥铺渝高大厦</p>
          </div>
        </div>
        <div class="tab_list">
          <div class="tab">
            <p class="title">优秀</p>
            <p class="text">网络状态</p>
          </div>
          <div class="tab">
            <p class="title">正常</p>
            <p class="text">设备状态</p>
          </div>
          <div class="tab">
            <p class="title"></p>
            <p class="text"></p>
          </div>
          <div class="tab">
            <p class="title"></p>
            <p class="text"></p>
          </div>
        </div>
      </div>
      <div class="box">
        <div class="top">
          <p class="code">CFEG52645162</p>
          <p class="status on"><span></span>离线</p>
        </div>
        <div class="nr">
          <div class="list">
            <p class="title">所属厂家：</p>
            <p class="text">统统锁有限公司</p>
          </div>
          <div class="list">
            <p class="title">厂家地址：</p>
            <p class="text">重庆市九龙坡石桥铺渝高大厦</p>
          </div>
        </div>
        <div class="tab_list">
          <div class="tab">
            <p class="title">优秀</p>
            <p class="text">网络状态</p>
          </div>
          <div class="tab">
            <p class="title">正常</p>
            <p class="text">设备状态</p>
          </div>
          <div class="tab">
            <p class="title"></p>
            <p class="text"></p>
          </div>
          <div class="tab">
            <p class="title"></p>
            <p class="text"></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
 
<script>
export default {
  components: {},
  data() {
    return {
      lanmu:[
       {name:'继电器',query:''},
       {name:'门锁',query:1},
     ],
    };
  },
  onShow() {},

  methods: {

    
  },
  onHide() {},

  onUnload() {},
};
</script>

<style lang="scss" scoped>
.content_box{
  min-height: 100vh;
  background: #f5f5f5;
  .lanmu_box{
    height: 88rpx;
    margin-bottom:30rpx;
    .box{
      position: fixed;
      top:0;
      width: 100%;
      z-index: 100;
      background: #fff;
    }
    /deep/ .van-tab{
      color:#999;
      font-size:30rpx;
    }
    /deep/ .van-tabs__line{
      background: #1E68FF;
    }
    /deep/ .van-tab--active{
      color:#222;
      font-weight: bold;
    }
  }
  .list_box{
    .box{
      width: 92%;
      background: #fff;
      border-radius: 15rpx;
      margin:0 auto;
      margin-bottom:30rpx;
      .top{
        height: 80rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding:0 30rpx;
        border-bottom:1px solid #f5f5f5;
        font-size:28rpx;
        .status{
          display: flex;
          align-items: center;
          color:#0F8947;
          span{
            display: inline-block;
            width: 8rpx;
            height: 8rpx;
            background: #0F8947;
            border-radius: 50%;
            margin-right:10rpx;
          }
          &.on{
            color:#999;
            span{
              background: #999;
            }
          }
        }
      }
      .nr{
        padding:30rpx;
        border-bottom:1px solid #f5f5f5;
        .list{
          display: flex;
          font-size:28rpx;
          margin-bottom:20rpx;
          .title{
            color:#666;
          }
          &:last-child{
            margin-bottom:0;
          }
        }
      }
      .tab_list{
        display: flex;
        padding:30rpx;
        text-align: center;
        .tab{
          margin-right:50rpx;
        }
        .title{
          font-weight: 500;
          margin-bottom:10rpx;
          font-size:32rpx;
        }
        .text{
          font-size:26rpx;
          color:#666;
        }
      }
    }
  }
}
</style>
